<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="practicePlan" id="practicePlan" />
    <!--<link rel="stylesheet" href="planDetail.css">-->
    <script src="jquery-2.2.3.min.js"></script>
    <!--<script src="planDetail.js"></script>-->
    <style type="text/css">
        body{background:#363b49;}
        *{margin:0;padding:0;}
        .clearbox{clear:both;}
        /*最大框*/
        .containt_box{width:100%;background:#363b49;padding-top:20px;}
        /*大标题*/
        .planDetail{margin-left:4%;width:92%;height:54px;}
        .title_bg{width:100%;height:44px;border-radius:22px;background:#1b1e27;position:relative;margin-top:20px;text-align:center;}
        .title_bg span{font-size:24px;color:#bbbcbd;line-height:44px;}

        /*内容部分*/
        .daysBox{width:100%;}
        .daysOne{margin-left:4%;margin-right:3%;}
        .daysContaint{width:100%;}
        .daysTitle{width:100%;height:88px;}
        /*日期*/
        .getDayBox{height:100%;width:10%;position: relative;float:left;}
        /*.getDate{border:1px solid white;box-sizing: border-box;}*/
        /*.getDay{border:1px solid blue;box-sizing: border-box;}*/
        .getDate span{font-size:34px;color:white;position:absolute;bottom:36px;}
        .getDay span{font-size:20px;color:white;position:absolute;top:48px;}
        /*1KM慢跑（跑走结合）    */
        .title{margin-left:3 %;font-size:28px;color:white;float:left;line-height:88px;}
        /*展开收缩图*/
        /*.containt_r{margin-right:0}*/
        .imgBox{width:7%;height:44px;text-align:center;float:right;margin-top:22px;}
        .imgBox .collapse{display:none;}
        /*详细介绍*/
        .description{width:100%;}
        .description p span{margin-left:13%;margin-bottom:40px;margin-top:20px;font-size:24px;color:white;line-height:36px;opacity:0.6;}
        .descriptionDetail{display:none;}
        /*线条*/
        .lines{width:100%;height:1px;background:white;opacity:0.82;}
    </style>
</head>
<body>

    <div class="containt_box">
        <div class="planDetail">
            <div class="title_bg">
                <span>计划详情</span>
            </div>
        </div>
        <div class="daysBox">

            <div class="daysOne">
                <div class="daysContaint">
                    <div class="daysTitle">
                        <div class="getDayBox">
                            <div class="getDate">
                                <span>26</span>
                            </div>
                            <div class="getDay">
                                <span>周五</span>
                            </div>
                        </div>
                        <div class="title">1KM慢跑（跑走结合）</div>
                        <div class="containt_r">
                            <div class="imgBox">
                                <img src="icon_open@2x.png" id="imgToggle">
                                <img src="icon_pack%20up@2x.png" id="imgToggle" class="collapse">
                            </div>
                        </div>
                        <div class="clearbox"></div>
                    </div>
                    <div class="description">
                        <p><span class="descriptionDetail">以非常舒服轻松的节奏跑，配速可比个人最快速度慢2分钟/公里以上。跑步中呼吸顺畅，可正常聊天不会感到难受</span></p>
                    </div>
                </div>
            </div>
            <div class="lines"></div>

            <div class="daysOne">
                <div class="daysContaint">
                    <div class="daysTitle">
                        <div class="getDayBox">
                            <div class="getDate">
                                <span>26</span>
                            </div>
                            <div class="getDay">
                                <span>周五</span>
                            </div>
                        </div>
                        <div class="title">1KM慢跑（跑走结合）</div>
                        <div class="containt_r">
                            <div class="imgBox">
                                <img src="icon_open@2x.png" id="imgToggle">
                                <img src="icon_pack%20up@2x.png" id="imgToggle" class="collapse">
                            </div>
                        </div>
                        <div class="clearbox"></div>
                    </div>
                    <div class="description">
                        <p><span class="descriptionDetail">以非常舒服轻松的节奏跑，配速可比个人最快速度慢2分钟/公里以上。跑步中呼吸顺畅，可正常聊天不会感到难受</span></p>
                    </div>
                </div>
            </div>
            <div class="lines"></div>

            <div class="daysOne">
                <div class="daysContaint">
                    <div class="daysTitle">
                        <div class="getDayBox">
                            <div class="getDate">
                                <span>26</span>
                            </div>
                            <div class="getDay">
                                <span>周五</span>
                            </div>
                        </div>
                        <div class="title">1KM慢跑（跑走结合）</div>
                        <div class="containt_r">
                            <div class="imgBox">
                                <img src="icon_open@2x.png" id="imgToggle">
                                <img src="icon_pack%20up@2x.png" id="imgToggle" class="collapse">
                            </div>
                        </div>
                        <div class="clearbox"></div>
                    </div>
                    <div class="description">
                        <p><span class="descriptionDetail">以非常舒服轻松的节奏跑，配速可比个人最快速度慢2分钟/公里以上。跑步中呼吸顺畅，可正常聊天不会感到难受</span></p>
                    </div>
                </div>
            </div>
            <div class="lines"></div>

        </div>
    </div>
    <script type="text/javascript">
        window.onload = function () {
            alert(window.screen.width);
        }
        //切换按钮事件

        $(document).ready(function(){
//            alert(window.screen.width);
            $(".imgBox").click(function () {
                //箭头的展开与关闭
                //$(".imgBox img").toggleClass("collapse");

                $(this).children().toggleClass("collapse");

                //内容的显示与隐藏
                var $description = $($(this).parent().parent().next());
                //console.log($description);
                var $descriptionDetail = $($description.children().children());
                if($descriptionDetail.css("display") == "none"){
                    $descriptionDetail.css("display","block");
                }else{
                    $descriptionDetail.css("display","none");
                }

                //if($(".descriptionDetail").css("display") == "none"){
                //    $(".descriptionDetail").css("display","block");
                //}else{
                //    $(".descriptionDetail").css("display","none");
                //}
            })
        });

    </script>
</body>
</html>